<template>
  <div style="display: inline-block;">
    <slot v-bind:on='toggle'>
      <v-btn
        v-bind="$attrs"
        color="indigo"
        outlined
        @click.stop="toggle"
        v-on="$listeners">
        添加费用项
      </v-btn>
    </slot>
    <v-row justify="center">
      <v-dialog v-model="dialog" persistent scrollable max-width="800px">
        <v-card>
          <v-card-title>
            <span class="headline">添加费用项</span>
          </v-card-title>
          <v-card-text>
            <v-data-table
              v-model="selection"
              :loading="loading"
              :headers="headers"
              :items="items"
              item-value="value"
              show-select
              hide-default-footer
              no-data-text="没有数据了"
              class="elevation-1"
            >
            </v-data-table>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false">取消</v-btn>
            <v-btn :disabled="!selection.length" color="primary" text @click="ok">保存</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>

<script>
import { getOtherDictList } from '@/api/system'
export default {
  props: {
    selected: {
      type: Array,
      default: []
    }
  },
  watch: {
    async dialog(bool) {
      if (bool) {
        this.selection = []
      }
      if(bool && !this.sitems.length) {
        this.loading = true
        try {
          let res = await getOtherDictList({type: 'tourfee_explain'})
          this.items = res.data.map(item => {
            return {
              ...item,
              name: item.value
            }
          })
          this.sitems = this.items.map(item => Object.assign({}, item))
        } catch (error) {
          
        }
        this.loading = false
      }
      this.items = this.sitems.filter(item => this.selected.map(item => item.name).indexOf(item.value) == -1 )
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      items: [],
      sitems: [],
      headers: [
        { text: '团费项目', value: 'value', align: 'center' }
      ],
      selection: [],
    }
  },
  methods: {
    toggle() {
      this.dialog = !this.dialog
    },
    ok() {
      this.dialog = false
      this.$emit('change', this.selection)
    }
  }
}
</script>

<style>

</style>